<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 网页的标题 -->
    <title>中国电信</title>
</head>
<!-- 网页的主体 -->
<body>
    <!-- 元素居中 -->
    <center>
        <!--
         div盒子标签
            width：宽
            height：高
            background-color：背景色
            border-radius:边框圆角
            border：边框（颜色 细线 实线）
            padding-top 上边距
        -->
        <div style="width: 50%;height: 100%;border-radius:15px;border: black thin solid;padding-top: 5px;">
            <!-- 表单标签 -->
            <form>
                <!-- h3:标题标签 -->
                <h3>用户注册</h3>
                <!-- 表格标签 -->
                <table border="0" style="width: 100%;">
                    <!-- 表格的行 -->
                    <tr style="height: 35px;">
                        <!--
                            td：表格
                              align：水平方向 left right center
                        -->
                        <td align="right">用户名：</td>
                        <!--
                            input:文本框
                                type="text"  文本框
                                type="password" 密码框
                                type="radio" 单选框
                                type="checkbox" 多选框
                                type="submit" 提交按钮
                                type="file" 文件域
                                type="image" 图片按钮
                                type="email" 邮箱框
                                type="url" 网址框
                                type="number" 数字框
                                type="range" 滑块
                                placeholder 文本框的提示内容设置
                                required 非空
                            select:下拉框
                            textarea:多行文本域
                        -->
                        <td>
                            <input type="text" required placeholder="用户名"
                                   style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">密码：</td>
                        <td>
                            <input type="password" required placeholder="密码"
                                   style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">确认密码：</td>
                        <td>
                            <input type="password" required placeholder="确认密码"
                                   style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">年龄：</td>
                        <td>
                            <input type="number" required placeholder="年龄"
                                   style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">性别：</td>
                        <td>
                            <!--
                                checked默认选中
                                多个单选框，做到互斥，需要一个 相同的 name="sex"
                            -->
                            <input name="sex" type="radio" checked/>男 &nbsp;&nbsp;
                            <input name="sex" type="radio"/>女
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">爱好：</td>
                        <td>
                            <input type="checkbox" checked/>游泳
                            <input type="checkbox"/>读书
                            <input type="checkbox"/>画画
                            <input type="checkbox"/>躺平
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">籍贯：</td>
                        <td>
                            <select style="width: 90%;height: 30px;border-radius:4px;">
                                <option>北京</option>
                                <option>上海</option>
                                <option selected>新疆</option>
                            </select>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">邮箱：</td>
                        <td>
                            <input type="email" style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">上传证件：</td>
                        <td>
                            <input type="file" style="height: 25px;" />
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">企业网站：</td>
                        <td>
                            <input type="url" style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">工作经历：</td>
                        <td>
                            <!-- 多行文本框 cols：一行有多行列   rows：总共有几行 -->
                            <textarea cols="15" rows="4" style="width: 90%;"></textarea>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td align="right">验证：</td>
                        <td>
                            <input type="range" style="width: 90%;border-radius:4px;height: 25px;"/>
                        </td>
                    </tr>
                    <tr style="height: 35px;">
                        <td colspan="2" align="center">
                            <input type="image"  src="./login.gif" style="margin-top: 20px;"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </center>
    <a name="zhucejiewei" >注册结尾</a>
</body>
</html>